<template>
  <div id="rightPanel">

    <div style="display: block;" >
      <div id="domCartright1" ref="domCartright1"></div>
      <div id="DatavTable" ref="DatavTable" title="绿地分类情况">
        <dv-scroll-board :config="config" style="width:100%" />
      </div>

    </div>
  </div>
</template>
<script>
  import { getStatldflsum, getldtypeStatldflsum } from "../../api/ldfl/ldfl.js";
  import * as echarts from "echarts";
  import { getDicts } from "../../api/system/dict/data";
  import { EleResize } from "@/utils/esresize";
  export default {
    name: 'rightPanel',
    props: {
      paramObj: { default: () => { } },
    },
    data() {
      return {
        gongyaunld: undefined,
        gongyaunldsum: undefined,
        jiancehngqu: undefined,
        jiancehngqusum: undefined,
        jianchengquwaisum: undefined,
        ldtype: undefined,
        piechartdata: undefined,
        // 轮播表配置
        config: {
          // 标头
          header: ['排名', '绿地类型', '面积(公顷)','占比(%)'],
          // 表头高度
          headerHeight:50,
          // 表行数 默认值5，数据为5行，表行数等于5可能不轮播
          rowNum:5,
          // 数据
          data: [
          ],
          // 是否开启序号
          index: false,
          // 宽度-按照顺序-不写就是平均分配
          columnWidth: [50, 100, 150,100],
          // 居中方式
          align: ['center', 'center', 'center', 'center'],
          // 滚动时间-每条
          waitTime: 3600,
          // 序号别名
          indexHeader: 'ID',
          oddRowBGC: "rgba(255,255,255,0.5)", // 奇数行背景色
          evenRowBGC: "rgba(244,247,186,0.5)", // 偶数行背景色
          headerBGC: "rgba(0,255,0,0.5)", // 表头背景色
        },
      }
    },
    mounted() {
      let _self = this
      _self.getData()
      let pageHeight = document.documentElement.clientHeight;
      this.$refs.domCartright1.style.height = pageHeight * 0.45 + 'px';
      this.$refs.DatavTable.style.height = pageHeight * 0.4 + 'px';
    },
    methods: {
      async getData() {
        let _self = this
        // 半固定数据
        // 公园绿地数据
        let query = _self.paramObj

        let query_gongyaunldsum = {
          xzqfanwei: _self.paramObj.xzqfanwei,
          ldtype: '公园绿地'
        }
        // console.log(query_gongyaunldsum);
        let gongyaunld = await getStatldflsum(query_gongyaunldsum)
        _self.gongyaunldsum = undefined,
          _self.gongyaunldsum = gongyaunld.data[0].sumarea

        // 变更数据
        _self.Chart2Data1()
      },
      /**
      * @description: 初始化统计图1
      * @return {*}
      */
      // 按道路等级统计全部道路长度、面积信息
      async Chart2Data1() {
        let _self = this;
        // 先构建用于查询数据的查询参数对象
        let query = _self.paramObj;

        let ldtypedata = await getldtypeStatldflsum(query);
        _self.ldtype = [];
        _self.ldtype = ldtypedata.data;
        console.log(_self.ldtype);
        // console.log(_self.ldtype[0].sumarea);
        _self.initChart1();
        _self.initChart2_DatavTable();
        // _self.initChart2();
      },
      /**
      * @description: 初始化柱状图1
      * @return {*}
      */
      async initChart1() {
        let _self = this;
        var chartDom = document.getElementById('domCartright1');
        var myChart1 = echarts.init(chartDom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        // 按照面积升序排序
        let ldtype = _self.ldtype.sort((a, b) => a.sumarea - b.sumarea)

        let dataAxis = [];
        let dataYxis1 = [];
        let dataYxis2 = [];
        let dataYxis3 = [];
        let dataYxis4 = [];
        let dataYxis5 = [];
        let dataYxis6 = [];
        let dataYxis7 = [];
        let dataYxis8 = [];
        let dataYxis9 = [];
        let dataYxissum = [];
        ldtype.forEach(e => {
          dataAxis.push(e.ldtype);
          dataYxis1.push(e.天山区);
          dataYxis2.push(e.沙依巴克区);
          dataYxis3.push(e.新市区);
          dataYxis4.push(e.水磨沟区);
          dataYxis5.push(e.经开区);
          dataYxis6.push(e.达坂城区);
          dataYxis7.push(e.米东区);
          dataYxis8.push(e.乌鲁木齐县);
          dataYxis9.push(e.甘泉堡);
          dataYxissum.push(Math.round(e.sumarea));
        });
        var app = {};

        var option;

        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            },
            valueFormatter: function (value) {
              if (value) {
                return value + ' 公顷';
              }
            },
            backgroundColor: 'rgba(255,255,255,0.8)', // 悬浮框背景色
            borderColor: '#000', // 悬浮框边框颜色
            borderWidth: 1, // 悬浮框边框宽度
            textStyle: { // 悬浮框文字样式
              color: '#000',
              fontSize: 12
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: '12px',
              color: '#ffff'
            },
          },
          yAxis: {
            name: "面积/公顷",
            nameTextStyle: {
              color: "#FFFFFF",
              fontSize: 12,
            },
            type: 'category',
            data: dataAxis,
            axisLabel: {
              // inside: true,
              fontSize: '16px',
              color: '#ffff'
            },
            interval: 15,//interval 为 0 时，所有的标签都显示出来， interval 表示步长，两个标签之间的间隔

          },
          series: [
            {
              name: '天山区',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#b6cbff',
              data: dataYxis1
            },
            {
              name: '沙依巴克区',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#90b4ff',
              data: dataYxis2
            },
            {
              name: '新市区',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#8098ff',
              data: dataYxis3
            },
            {
              name: '水磨沟区',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#acd063',
              data: dataYxis4
            },
            {
              name: '经开区',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#e9f59f',
              data: dataYxis5
            },
            {
              name: '达坂城区',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#fffa0c',
              data: dataYxis6
            },
            {
              name: '米东区',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#ffd21b',
              data: dataYxis7
            },
            {
              name: '乌鲁木齐县',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              color: '#ffa403',
              data: dataYxis8
            },
            {
              name: '甘泉堡',
              type: 'bar',
              barWidth: '50%',
              stack: 'total',
              label: {
                //最后一个label显示总数数据
                show: true,
                position: 'top', // 可以是 'top', 'left', 'right', 'bottom', 'inside', 或者 'insideLeft'
                fontFamily: '微软雅黑',
                fontSize: 14,
                fontWeight: 'bolder',
                color: 'black',
                formatter: function (param) {
                  return dataYxissum[param.dataIndex] + " 公顷 ";
                  // console.log(param);
                },
              },
              emphasis: {
                focus: 'series'
              },
              color: '#ff6f33',
              data: dataYxis9
            }
          ]
        };
        option && myChart1.setOption(option);
      },

/**
* @description: 初始化轮播图2
* @return {*}
*/
    async initChart2_DatavTable(){
      let _self = this
      // 按照用绿地面积排序
      let ldtype = _self.ldtype
      ldtype.sort((a, b) => b.sumarea - a.sumarea)
      // 按照用绿地类型名称排序
      // let ldtypechaptersTransOrder = ['公园绿地', '防护绿地', '广场用地', '附属绿地', '区域绿地']
      //   function customSortMultiDimensionalArray(arr, propertyName, order) {
      //     return arr.sort((a, b) => {
      //       const indexA = order.indexOf(a[propertyName]);
      //       const indexB = order.indexOf(b[propertyName]);
      //       return indexA - indexB;
      //     });
      //   };
      //    customSortMultiDimensionalArray(ldtype, 'ldtype', ldtypechaptersTransOrder);
      this.config.data=[]
      let query = _self.paramObj
      let configsum = await getStatldflsum(query)
      let configsumdata = Number(configsum.data[0].sumarea)
      // 添加总计行
      this.config.data.push(['','总计',configsumdata,'100'])
      for (let index = 0; index < ldtype.length; index++) {
          const element = ldtype[index];
          let zhanbi
          if(configsumdata==0){
            zhanbi= 0
          }else{
            zhanbi= 100*Number(element.sumarea)/configsumdata;
          }
          this.config.data.push([
            index+1,
            element.ldtype,
            element.sumarea,
            zhanbi.toFixed(2)
          ]);
        };
      console.log(this.config.data);
      // 原因是DataV的组件不深度监听props的变化。
      //解决方法是，在axios请求后，不仅将数据赋值给组件，还需要创建一个新的对象来触发组件的更新。
      this.config={...this.config}
    },
/**
* @description: 初始化折线图2
* @return {*}
*/
      async initChart2() {
        let _self = this;
        var chartDom2 = document.getElementById('domCartright2');
        var myChart2 = echarts.init(chartDom2, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        // 按照用绿地类型称排序
        let ldtypechaptersTransOrder = ['公园绿地', '防护绿地', '广场用地', '附属绿地', '区域绿地']
        let ldtype = _self.ldtype
        function customSortMultiDimensionalArray(arr, propertyName, order) {
          return arr.sort((a, b) => {
            const indexA = order.indexOf(a[propertyName]);
            const indexB = order.indexOf(b[propertyName]);
            return indexA - indexB;
          });
        };
        customSortMultiDimensionalArray(ldtype, 'ldtype', ldtypechaptersTransOrder);
        console.log(ldtype);

        let dataAxis = [];
        let dataYxissum = [];
        ldtype.forEach(e => {
          dataAxis.push(e.ldtype);
          dataYxissum.push(Math.round(e.sumarea));
        });

        var app = {};

        var option;

        option = {
          color: ['#37A2FF'],
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            backgroundColor: 'rgba(255,255,255,0.8)', // 悬浮框背景色
            borderColor: '#000', // 悬浮框边框颜色
            borderWidth: 1, // 悬浮框边框宽度
            textStyle: { // 悬浮框文字样式
              color: '#000',
              fontSize: 12
            },
          },
          legend: {
            data: dataAxis
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: dataAxis,
              axisLabel: {
                // inside: true,
                fontSize: '12px',
                color: '#FFFFFF'
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                // inside: true,
                fontSize: '12px',
                color: '#FFFFFF'
              },
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 公顷';
                }
              },
              label: {
                show: true,
                position: 'top', // 可以是 'top', 'left', 'right', 'bottom', 'inside', 或者 'insideLeft'
                fontFamily: '微软雅黑',
                fontSize: 14,
                fontWeight: 'bolder',
                color: 'black',
                formatter: function (param) {
                  return dataYxissum[param.dataIndex] + " 公顷 ";
                },
              },
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(55, 162, 255)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(116, 21, 219)'
                  }
                ])
              },
              // emphasis: {
              //   show:false,// 鼠标悬停时显示
              //   focus: 'series'
              // },
              data: dataYxissum
            }
          ]
        };
        option && myChart2.setOption(option);
      },
    },
  }
</script>
<style>
  #domCartright1{
    height: 50% !important;
  }
  #DatavTable {
        margin: 10px;
        width: 95%;
        height: 350px;
    }

</style>
